<template>
	<div>
		<div>
			<el-input placeholder="请输入报修详细地址或者报修内容" type="text" style="width:400px" v-model="pageParam.keyWord"></el-input>
			<el-select clearable placeholder="请选择区域" style="width:150px" v-model="areaVo.areaLocationId" @change="loadAreas()">
				<el-option v-for="(item,index) in areaLocations" :label="item.areaLocationName" :value="item.areaLocationId"></el-option>
			</el-select>
			<el-select clearable placeholder="请选择位置" style="width:150px" v-model="pageParam.repairArea">
				<el-option v-for="(item,index) in areas" :label="item.areaName" :value="item.areaId"></el-option>
			</el-select>
			<el-select clearable placeholder="请选择维修状态" style="width:150px" v-model="pageParam.repairStatus">
				<el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value"></el-option>
			</el-select>
			<el-button type="primary"  @click="loadDatas(1)">搜索</el-button>
		</div>
		<div style="margin-top: 10px">
			<el-table :data="repairs" @selection-change="selects">
				<el-table-column type="selection" width="180"></el-table-column>
				<el-table-column prop="repairNum" label="报修编号" width="180"></el-table-column>
				<el-table-column :formatter="areaFormatter" prop="repairArea" label="维修区域" width="180"></el-table-column>
				<el-table-column :formatter="typeFormatter" prop="repairType" label="维修类型" width="180"></el-table-column>
				<el-table-column prop="repairContent" label="维修内容" width="180"></el-table-column>
				<el-table-column prop="detailLocation" label="详细地址" width="180"></el-table-column>
				<el-table-column prop="repairDate" label="报修时间" width="180"></el-table-column>
				<el-table-column prop="acceptUser" label="受理人" width="180"></el-table-column>
				<el-table-column :formatter="statusFormatter" prop="repairStatus" label="维修状态" width="180"></el-table-column>
				<el-table-column width="300" label="操作">
					<template slot-scope="scope">
						  <el-button type="danger" size="mini" >确认维修</el-button>
						  <el-button type="danger" size="mini" :disabled="scope.row.repairStatus != 0 && scope.row.repairStatus != 6 ">修改维修</el-button>
						  <el-button type="danger" size="mini" :disabled="scope.row.repairStatus != 0 && scope.row.repairStatus != 6 ">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
			  layout="prev, pager, next"
			  :page-size="pageParam.size"
			  :total="total" @current-change="pageLoad" :current-page="pageParam.index">
			</el-pagination>
		</div>
		
	</div>
</template>

<script>
	export default{
		name:'Myrepair',
		data(){
			return{
				status:[
					{
						value:0,
						label:'待受理'
					},{
						value:1,
						label:'已派工'
					},{
						value:2,
						label:'维修中'
					},{
						value:3,
						label:'维修完成'
					},{
						value:4,
						label:'待支付'
					},{
						value:5,
						label:'支付完成'
					},{
						value:6,
						label:'已驳回'
					}
				],
				statusName:null,
				allTypes:[],
				ids: [],
				repairs:[],
				areas:[],
				smallAreas:[],
				areaLocations:[],
				areaVo:{
					areaId:null,
					areaName:null,
					areaLocationId:null,
				},
				total: 0,
				pageParam:{
					index:1,
					size:4,
					repairArea:null,
					repairType:null,
					acceptUser:null,
					repairPerson:null,
					repairStatus:null,
					keyWord:null
				}
			}
		},
		methods:{
			pageLoad(i){
				this.pageParam.index=i;
				this.loadDatas();
			},
			areaFormatter(row,column,cell){
				let h=null;
				for(h in this.smallAreas){
					if(this.smallAreas[h].areaId==cell){
						return this.smallAreas[h].areaName;
					}
				}
			},
			statusFormatter(row,column,cell){
				if(cell==0){
					return '待受理';
				}else if(cell==1){
					return '已派工';
				}else if(cell==2){
					return '维修中';
				}else if(cell==3){
					return '维修完成';
				}else if(cell==4){
					return '待支付';
				}else if(cell==5){
					return '支付完成';
				}else if(cell==6){
					return '已驳回';
				}
			},
			typeFormatter(row,column,cell){
				let h=null;
				for(h in this.allTypes){
					if(this.allTypes[h].typeId==cell){
						return this.allTypes[h].typeName;
					}
				}
			},
			selects(sel) {
				this.ids = [];
				let index=null;
				for(index in sel) {
					this.ids.push(sel[index].id);
				}
			},
			loadSamllAreas(){
				this.$http.get("/area/findSmallAreas").then(resp =>{
					if(resp.data.code == 200){
						this.smallAreas=resp.data.data;
					}
				})
			},
			loadAllTyps(){
				this.$http.get("/repairType/findAllType").then(resp =>{
					if(resp.data.code == 2000){
						console.log(resp.data.data.data)
						this.allTypes = resp.data.data.data;
					}
				})
			},
			loadDatas(indexPage){
				if(indexPage != undefined) this.pageParam.index=indexPage;
				this.$http.post("/userRepair/findSelfDatas",this.pageParam).then(resp =>{
					if(resp.data.code==200){
						this.repairs=resp.data.data.records;
						this.total=resp.data.data.total;
					}
				})
			},
			loadAreas(){
				this.$http.post("/area/findSubordinateArea",this.areaVo).then(resp =>{
					if(resp.data.code == 2000){
						console.log(resp.data.data.data)
						this.areas=resp.data.data.data;
						this.pageParam.repairArea=null;
					}
				})
			},
			loadLocations(){
				this.$http.get("/areaLocation/findAllArea").then(resp =>{
					if(resp.data.code==2000){
						this.areaLocations=resp.data.data.data;
					}
				})
			},
		},
		created() {
			this.loadAllTyps();
			this.loadSamllAreas();
			this.loadDatas();
			this.loadLocations();
		}
	}
</script>

<style>
</style>
